<template>
    <!-- 预约信息 -->
    <div class="box">
        <div class="head">
            <van-icon name="arrow-left" @click="router.back()"/>
            <span>预约信息</span>
            <van-icon name="ellipsis" style="transform: rotate(90deg);" />
        </div>
        <div>
            <van-cell title="理发师" value="托尼" />
            <van-cell title="地址" value="北京朝阳门店" />
            <van-cell title="姓名" value="KOTO" />
            <van-cell title="电话" value="13888888888" />
            <van-cell title="预订日期" value="2024年12月28日" />
            <van-cell title="预定时间" value="上午11点" />
            <van-cell title="预约状态" value="已预约" />
            <van-cell title="发型（蓬巴杜发型）" value="￥6.00" />
            <van-cell title="全部" value="￥6.00" />
        </div>
        <div style="display: flex;justify-content: space-between;align-items: center;
            box-sizing: border-box;padding: 0 10px;margin: 10px 0;width: 100%;height: 8%;border: 1px solid #ccc;
            border-radius: 15px;">
            <div>
                <van-icon style="color: #02a5eb;font-size: 20px;" name="alipay" />&nbsp;&nbsp;
                <span>支付宝</span>
            </div>
            <span style="color: #ffc08c;">切换</span>
        </div>
        <button style="width: 90%;height: 8%;background-color: #ff9900;
            border: none;border-radius: 5px;margin-top: 20px;color: #fff;left: 50%;transform: translateX(-50%);position: fixed;bottom: 1rem;
            " @click="showCenter = true">确认付款</button>

        <!-- 弹框 -->
        <van-popup v-model:show="showCenter" round style="padding: 64px;display: flex;
        flex-direction: column;align-items: center;justify-content: space-between;" closeable>
            <van-icon name="passed"  style="font-size: 2.5rem;"/><br>
            <p style="font-size: 1.5rem;">支付成功</p><br>
            <button  style="width: 150px;height: 50px;border: none;border-radius: 5px;
            background-color: #ff9900;color: #fff;margin-top: 20px;"
            @click="router.push('/fuxiang')">查看详情</button>
        </van-popup>
    </div>

</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router=useRouter()
const showCenter = ref(false)
</script>
<style scoped>
.box {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 0 10px;
}

.head {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3rem;
}
</style>